<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="位置信息" name="locationInfoTab">
          <!--          <div class="locationInfoTabStyle">-->
          <!--            <div style="flex-grow:1">-->
          <!--              <el-row :gutter="10" class="mb8">-->
          <!--                <el-col :span="1.5">-->
          <!--                  <el-button-->
          <!--                    type="primary"-->
          <!--                    plain-->
          <!--                    icon="el-icon-refresh"-->
          <!--                    size="mini"-->
          <!--                    @click="getBoatLocationInfoList"-->
          <!--                  >刷新-->
          <!--                  </el-button>-->
          <!--                </el-col>-->
          <!--              </el-row>-->
          <!--            </div>-->

          <!--            <div style="flex-grow:10">-->
          <!--              <el-table v-loading="loading" :data="boatLocationInfoList" @selection-change="handleSelectionChange"-->
          <!--                        max-height="680">-->
          <!--                &lt;!&ndash;            <el-table-column type="selection" width="55" align="center" />&ndash;&gt;-->
          <!--                &lt;!&ndash;            <el-table-column label="ID" align="center" prop="id" />&ndash;&gt;-->
          <!--                <el-table-column label="序号" type="index" align="center" width="48" fixed="left"/>-->
          <!--                <el-table-column label="终端ID" align="center" prop="meterId"/>-->
          <!--                <el-table-column label="定位状态" align="center" prop="locationStatus"-->
          <!--                                 :formatter="locationStatusFormatter"-->
          <!--                                 width="75"-->
          <!--                />-->
          <!--                &lt;!&ndash;            <el-table-column label="经度方位" align="center" prop="longitudeOri" :formatter="longitudeOriFormatter"/>&ndash;&gt;-->
          <!--                &lt;!&ndash;            <el-table-column label="纬度方位" align="center" prop="latitudeOri" :formatter="latitudeOriFormatter"/>&ndash;&gt;-->
          <!--                <el-table-column label="纬度" align="center" prop="latitude"/>-->
          <!--                <el-table-column label="经度" align="center" prop="longitude"/>-->
          <!--                <el-table-column label="高程(米)" align="center" prop="elevation"/>-->
          <!--                <el-table-column label="速度(km/h)" align="center" prop="speed"/>-->
          <!--                <el-table-column label="方向(°)" align="center" prop="orientation"/>-->
          <!--                <el-table-column label="当前卫星个数" align="center" prop="satellitesNum"/>-->
          <!--                <el-table-column label="水平分量精度因子" align="center" prop="hdop"/>-->
          <!--                <el-table-column label="GSM信号强度" align="center" prop="csq"/>-->
          <!--                <el-table-column label="生成时间" align="center" prop="createTime" width="180">-->
          <!--                  <template slot-scope="scope">-->
          <!--                    <span>{{ parseTime(scope.row.createTime) }}</span>-->
          <!--                  </template>-->
          <!--                </el-table-column>-->
          <!--                &lt;!&ndash;            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">&ndash;&gt;-->
          <!--                &lt;!&ndash;              <template slot-scope="scope">&ndash;&gt;-->
          <!--                &lt;!&ndash;                <el-button&ndash;&gt;-->
          <!--                &lt;!&ndash;                  size="mini"&ndash;&gt;-->
          <!--                &lt;!&ndash;                  type="text"&ndash;&gt;-->
          <!--                &lt;!&ndash;                  icon="el-icon-edit"&ndash;&gt;-->
          <!--                &lt;!&ndash;                  @click="handleUpdate(scope.row)"&ndash;&gt;-->
          <!--                &lt;!&ndash;                  v-hasPermi="['system:info:edit']"&ndash;&gt;-->
          <!--                &lt;!&ndash;                >修改</el-button>&ndash;&gt;-->
          <!--                &lt;!&ndash;                <el-button&ndash;&gt;-->
          <!--                &lt;!&ndash;                  size="mini"&ndash;&gt;-->
          <!--                &lt;!&ndash;                  type="text"&ndash;&gt;-->
          <!--                &lt;!&ndash;                  icon="el-icon-delete"&ndash;&gt;-->
          <!--                &lt;!&ndash;                  @click="handleDelete(scope.row)"&ndash;&gt;-->
          <!--                &lt;!&ndash;                  v-hasPermi="['system:info:remove']"&ndash;&gt;-->
          <!--                &lt;!&ndash;                >删除</el-button>&ndash;&gt;-->
          <!--                &lt;!&ndash;              </template>&ndash;&gt;-->
          <!--                &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
          <!--              </el-table>-->
          <!--            </div>-->

          <!--            <div style="flex-grow:1">-->
          <!--              <pagination-->
          <!--                v-show="boatLocationInfoTotal>0"-->
          <!--                :total="boatLocationInfoTotal"-->
          <!--                :page.sync="boatLocationInfoQueryParams.pageNum"-->
          <!--                :limit.sync="boatLocationInfoQueryParams.pageSize"-->
          <!--                @pagination="getBoatLocationInfoList"-->
          <!--              />-->
          <!--            </div>-->

          <!--          </div>-->

          <div id="mapContainer"></div>

        </el-tab-pane>
        <el-tab-pane label="船机工况信息" name="boatMachineWorkingInfoTab">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-refresh"
                size="mini"
                @click="getBoatMachineWorkingInfoList"
              >刷新
              </el-button>
            </el-col>
          </el-row>
          <el-table v-loading="loading" :data="boatMachineWorkingInfoList" @selection-change="handleSelectionChange"
                    max-height="680">
            <!--            <el-table-column type="selection" align="center"/>-->
            <el-table-column label="序号" type="index" align="center" width="48" fixed="left"/>
            <el-table-column label="终端ID" align="center" prop="meterId" fixed="left"/>
            <el-table-column label="船舶机型ID" align="center" prop="machineModelId"
                             :formatter="machineModelIdFormatter"
                             width="90" fixed="left"
            />
            <el-table-column label="转速(rpm)" align="center" prop="speed"/>
            <el-table-column label="扭矩(N·m)" align="center" prop="torque"/>
            <el-table-column label="负荷率(%)" align="center" prop="loadRate"/>
            <el-table-column label="油门开度(%)" align="center" prop="throttleOpening"/>
            <el-table-column label="瞬时油耗(L/h)" align="center" prop="instantFuelConsumption"/>
            <el-table-column label="累计油耗(L)" align="center" prop="accumulateFuelConsumption"/>
            <el-table-column label="发动机运行时间(h)" align="center" prop="engineOperateTime"/>
            <el-table-column label="机油温度(℃)" align="center" prop="engineOilTemp"/>
            <el-table-column label="机油压力(Mpa)" align="center" prop="engineOilPressure"/>
            <el-table-column label="出水温度(℃)" align="center" prop="outWaterTemp"/>
            <el-table-column label="排气温度(℃)" align="center" prop="exhaustGasTemp"/>
            <el-table-column label="进气压力(kPa)" align="center" prop="inGasPressure"/>
            <el-table-column label="进气温度(℃)" align="center" prop="inGasTemp"/>
            <el-table-column label="蓄电池电压(V)" align="center" prop="storageBatteryVoltage"/>
            <el-table-column label="燃油温度(℃)" align="center" prop="fuelOilTemp"/>
            <el-table-column label="燃油精滤后压力(Mpa)" align="center" prop="fuelOilAfterFilteredPressure"/>
            <el-table-column label="燃油精滤前压力(Mpa)" align="center" prop="fuelOilBeforeFilteredPressure"/>
            <el-table-column label="设定轨压(hpa)" align="center" prop="settingTrackPressure"/>
            <el-table-column label="实际轨压(hpa)" align="center" prop="reallyTrackPressure"/>
            <el-table-column label="燃油负压(kPa)" align="center" prop="fuelOilNegativePressure"/>
            <el-table-column label="曲轴箱压力(hpa)" align="center" prop="crankcasePressure"/>
            <el-table-column label="机油滤前压力(Mpa)" align="center" prop="engineOilBeforeFilteredPressure"/>

            <el-table-column label="生成时间" align="center" prop="createTime" width="150" fixed="right">
              <template slot-scope="scope">
                <!--          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>-->
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">-->
            <!--              <template slot-scope="scope">-->
            <!--                <el-button-->
            <!--                  size="mini"-->
            <!--                  type="text"-->
            <!--                  icon="el-icon-edit"-->
            <!--                  @click="handleUpdate(scope.row)"-->
            <!--                  v-hasPermi="['system:info:edit']"-->
            <!--                >修改-->
            <!--                </el-button>-->
            <!--                <el-button-->
            <!--                  size="mini"-->
            <!--                  type="text"-->
            <!--                  icon="el-icon-delete"-->
            <!--                  @click="handleDelete(scope.row)"-->
            <!--                  v-hasPermi="['system:info:remove']"-->
            <!--                >删除-->
            <!--                </el-button>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>

          <pagination
            v-show="boatMachineWorkingInfoTotal>0"
            :total="boatMachineWorkingInfoTotal"
            :page.sync="boatMachineWorkingInfoListQueryParams.pageNum"
            :limit.sync="boatMachineWorkingInfoListQueryParams.pageSize"
            @pagination="getBoatMachineWorkingInfoList"
          />
        </el-tab-pane>
        <el-tab-pane label="发动机故障信息" name="engineMalfunctionInfoTab">
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script>
import {listBoatStatusInfo} from '@/api/boatStatusInfo'
import {dmsToDecimal, wgs84tobd09} from '@/utils/gps'

export default {
  name: 'BoatMachineWorkingInfo',
  data() {
    return {
      meterId: null,
      // activeTab: 'boatMachineWorkingInfoTab',
      activeTab: 'locationInfoTab',
      // 遮罩层
      loading: true,

      // 船机工况信息列表查询参数
      boatMachineWorkingInfoListQueryParams: {
        pageNum: 1,
        pageSize: 30,
        orderByColumn: 'generateTime',
        meterId: 0,
        //要获取的状态信息类型。
        //1：位置信息。
        //2：船机工况信息。
        //3：发动机故障信息。
        //4：报警信息。
        //5：当前驾驶循环统计信息。
        //6：配置心跳信息-J1939。
        //7：锁车相关信息。
        infoType: 2,
      },
      // 船机工况信息列表数据
      boatMachineWorkingInfoList: [],
      // 船机工况信息总条数
      boatMachineWorkingInfoTotal: 0,
      // 船舶位置信息列表查询参数
      boatLocationInfoQueryParams: {
        pageNum: 1,
        pageSize: 30,
        orderByColumn: 'generateTime',
        meterId: 0,
        infoType: 1
      },
      // 船舶位置信息列表数据
      boatLocationInfoList: [],
      // 船舶位置信息总条数
      boatLocationInfoTotal: 0,
      // 船舶当前驾驶循环统计信息列表查询参数
      boatCurrentDrivingCycleStatisticsInfoQueryParams: {
        pageNum: 1,
        pageSize: 30,
        orderByColumn: 'generateTime',
        meterId: 0,
        infoType: 5
      },
      // 船舶当前驾驶循环统计信息列表数据
      boatCurrentDrivingCycleStatisticsInfoList: [],
      // 船舶当前驾驶循环统计信息总条数
      boatCurrentDrivingCycleStatisticsInfoTotal: 0,
      // 显示搜索条件
      showSearch: false
    }
  },
  created() {
  },
  mounted() {
    // let workingInfo = this.$route.params && this.$route.params.workingInfo
    // console.log('mounted workingInfo: ', workingInfo)
    // let meterId = workingInfo && workingInfo.meterId

    this.initMap()

    // this.tes1()

    let meterId = this.$route.params && this.$route.params.meterId
    console.log('mounted this.$route: ', this.$route)
    console.log('mounted this.$route.meta.title: ', this.$route.meta.title)
    console.log('mounted meterId: ', meterId)

    // this.$route.meta.title = meterId

    if (meterId) {
      this.meterId = meterId;
      this.boatMachineWorkingInfoListQueryParams.meterId = this.meterId
      this.boatLocationInfoQueryParams.meterId = this.meterId
      this.boatCurrentDrivingCycleStatisticsInfoQueryParams.meterId = this.meterId
      this.getBoatMachineWorkingInfoList()
      this.getBoatLocationInfoList()
      this.getBoatCurrentDrivingCycleStatisticsInfoList()
    } else {
      this.$modal.alertWarning('终端ID为空,信息查看失败！')
    }

  },
  methods: {

    tes1() {
      // 度分秒格式的经纬度
      // const dmsLatitude = {degrees: 40, minutes: 26, seconds: 33, direction: 'N'};
      const dmsLatitude = {degrees: 31, minutes: 32, seconds: 37.66, direction: 'N'};
      // const dmsLongitude = {degrees: 116, minutes: 23, seconds: 45, direction: 'E'};
      const dmsLongitude = {degrees: 121, minutes: 20, seconds: 51.54, direction: 'E'};

      // 使用geolib的dmsToDegree函数进行转换
      // const decimalLatitude = dmsToDecimal(dmsLatitude.degrees, dmsLatitude.minutes, dmsLatitude.seconds, 'N');
      // const decimalLongitude = dmsToDecimal(dmsLongitude.degrees, dmsLongitude.minutes, dmsLongitude.seconds, 'E');

      // const decimalLatitude = dmsToDecimal("31°32′37.66″N");
      const decimalLocation = dmsToDecimal("121°20′51.54″E", "31°32′37.66″N");

      // console.log(`十进制纬度: ${decimalLatitude}`);
      // console.log(`十进制经度: ${decimalLongitude}`);

      console.log("转换后的经纬度：", decimalLocation)
    },

    initMap() {
      // 创建地图实例
      this.map = new BMapGL.Map('mapContainer');

      // 设定地图中心点和初始缩放级别
      var point = new BMapGL.Point(116.404, 39.915); // 这是北京的中心经纬度
      this.map.centerAndZoom(point, 10); // 缩放级别10表示全国范围的大致视图

      // 启用地图点击事件
      this.map.enableScrollWheelZoom(true); // 允许滚轮放大缩小地图
    },

    /** 查询船舶工况信息列表 */
    getBoatMachineWorkingInfoList() {
      this.loading = true
      listBoatStatusInfo(this.boatMachineWorkingInfoListQueryParams).then(response => {
        this.boatMachineWorkingInfoList = response.rows
        this.boatMachineWorkingInfoTotal = response.total
        this.loading = false
      })
    },
    /** 查询船舶位置信息列表 */
    getBoatLocationInfoList() {
      this.loading = true
      listBoatStatusInfo(this.boatLocationInfoQueryParams).then(response => {
        this.boatLocationInfoList = response.rows
        this.boatLocationInfoTotal = response.total
        this.loading = false

        this.lastLongitude = this.boatLocationInfoList[0].longitude;
        this.lastLatitude = this.boatLocationInfoList[0].latitude;
        console.log("this.lastLongitude: ", this.lastLongitude, " this.lastLatitude: ", this.lastLatitude)

        const decimalLocation = dmsToDecimal(this.lastLongitude, this.lastLatitude);
        console.log("getBoatLocationInfoList decimalLocation：", decimalLocation)

        let bdLocation = wgs84tobd09(decimalLocation[0], decimalLocation[1]);
        console.log("getBoatLocationInfoList bdLocation: ", bdLocation)

        var point = new BMapGL.Point(bdLocation[0], bdLocation[1]);
        var marker = new BMapGL.Marker(point);        // 创建标注
        this.map.addOverlay(marker);                     // 将标注添加到地图中

        setTimeout(() => {
          this.map.panTo(point)
        }, 2000)

      })
    },
    /** 查询船舶当前驾驶循环统计信息列表 */
    getBoatCurrentDrivingCycleStatisticsInfoList() {
      this.loading = true
      listBoatStatusInfo(this.boatCurrentDrivingCycleStatisticsInfoQueryParams).then(response => {
        this.boatCurrentDrivingCycleStatisticsInfoList = response.rows
        this.boatCurrentDrivingCycleStatisticsInfoTotal = response.total
        this.loading = false
      })
    },
    machineModelIdFormatter(row, column) {
      let machineModelId = row.machineModelId
      let machineModel
      switch (machineModelId) {
        case 1:
          // machineModel = '本埠电控直列柴油机'
          machineModel = '本埠柴油机'
          break
        default:
          machineModel = '未知'
      }

      return machineModel
    },
    locationStatusFormatter(row, column) {
      let locationStatus = row.locationStatus
      return locationStatus === 0 ? '定位' : '不定位'
    },
    longitudeOriFormatter(row, column) {
      let longitudeOri = row.longitudeOri
      return longitudeOri === 0 ? '东经' : '西经'
    },
    latitudeOriFormatter(row, column) {
      let latitudeOri = row.latitudeOri
      return latitudeOri === 0 ? '南纬' : '北纬'
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 10px;
}

.locationInfoTabStyle {
  display: flex;
  flex-direction: column;
}

#mapContainer {
  width: 100%;
  /* 84 = navbar + tags-view = 50 + 34
   * 20 = 上下padding各10px
   */
  min-height: calc(100vh - 84px - 20px - 90px);
}

</style>
